<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>姓名计算属性语法实现</title>
    <style> 
       
    </style>
</head>
<body>
    <div id="root">
        <!-- 
        计算属性:
            1.定义:要用的属性不存在，要通过已有属性计算得来
            2.原理:底层借助了Object.defineproperty方式提供的get和set方法
            3.get 函数什么时候执行
                1.初次读取时会执行一次
                2.当依赖的数据发生变化时会再次调用
            4.优势:与methods方法相比，内部有缓存机制(复用),效率更高，调试方便
            5.备注
                1.计算属性最终会出现在vm上，直接读取使用即可
                2.计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时
                依赖的数据发生变化
        -->
        <h1>姓名计算属性语法实现</h1>
        姓:<input type="text" v-model="firstName" @keyup.huiche="handleEnter">
        <br>
        名:<input type="text" v-model="lastName" @keyup.huiche="handleEnter">
        <br>
        <!-- fullname只会计算一次，剩下的都会从缓存里面取 -->
        全名:<span>{{fullName}}</span>
        <br>
        全名:<span>{{fullName}}</span>
        <br>
        全名:<span>{{fullName}}</span>
        <br>
        全名:<span>{{fullName}}</span>
    </div>
</body>
<script>
    Vue.config.keyCodes.huiche = 13; // 自定义tab键别名
    var vm = new Vue({
        el: '#root',
        data: {
            firstName: '尚硅谷', 
            lastName: '学院'
        },
        computed: {
            fullName:{
                //get 有什么作用，当有人读取fullname,get就会被调用，且返回值就作为fullname的值
                //get 什么时候调用,1初次读取的时候，2，所以来的数据发生变化时
                get(){
                    console.log("重新调用fullname方法")
                    // 此处的this是vm实例
                    console.log(this);
                    return this.firstName +'-'+ this.lastName;
                },
                //set 什么时候调用，当fullname被修改时
                set(value) {
                    console.log("fullname被修改了",  value)
                    const array = value.split('-');
                    this.firstName = array[0];
                    this.lastName = array[1];
                }
                
            }
        }
    })          
</script>
</html>